<template>
  <div class="login">
    <div class="login_box">
      <h2>登录</h2>
      <!-- 账号密码输入区域 -->
      <ul class="form">
        <li class="form_item" @click="clickFocus"> 
            <img class="form_img" src="~assets/img/ph.png" alt />
            <input
              class="form_input" 
              ref="input"
              v-model="account"
              type="text"
              placeholder="请输入账号"
            /> 
        </li>

        <li class="form_item">
          <img class="form_img" src="~assets/img/pass.png" alt />

          <input
            class="form_input"
            v-model="password"
            id="password"
            type="text"
            placeholder="请输入密码"
          />
        </li>
      </ul>
      <!-- 登录按钮 -->
      <div class="login_btn" @click="goLogin">
        <span>登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "api/login";
import { throtTling } from "utils/throttling";
import { setToken, getToken } from "utils/changeToken";
export default {
  name: "Login",
  data() {
    return {
      account: "",
      password: "",
    };
  },
  methods: {
    // 点击让input聚焦
    clickFocus(){ 
      this.$refs.input.focus()
    },
    goLogin: throtTling(function () {
      login(this.account, this.password).then((res) => {
        if (res.code == 200) {
          //   将token存入本地
          this.$toast({
            message: res.msg,
          });
          setToken(res.data.token);
          this.$router.push({ name: "Home" });
        } else {
          this.$toast({
            message: res.msg,
          });
        }
      });
    }, 2000),
  },
};
</script>
<style lang="less" scoped>
.login {
  position: relative;
  height: 100%;
  // 使用路径别名时，导入图片的时候前面需要加~
  background: url("~assets/img/login_bg.png") no-repeat;
  background-size: 100% 100%;
  .login_box {
    position: absolute;
    padding: 0 26px;
    top: 157px;
    left: 0;
    right: 0;
    h2 {
      font-size: 20px;
      color: #333;
      font-weight: 700;
      font-family: Source Han Sans CN Regular,
        Source Han Sans CN Regular-Regular;
    }
    .form {
      margin-top: 97px;
      .form_item {
        line-height: 55px;
        background: #fff;
        border-bottom: 1px solid #f1f1f1;
        .form_img {
          margin-right: 22px;
          width: 20px;
          height: 20px;
        }
        .form_input {
          width: 260px;
          height: 50px;
          font-size: 16px;
          color: #999;
        }
      }
    }
    .login_btn {
      margin: 0 auto;
      margin-top: 106px;
      width: 254px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      background: #28c08d;
      border-radius: 22px;
    }
  }
}
</style>